<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!-- Component: Section -->
<c:forEach var="section" items="${sections}">
    <div class="my-8">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-bold flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ${section.iconColor}" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${section.iconPath}"></path>
                </svg>
                    ${section.title}
            </h2>
            <a href="${section.moreLink}" class="btn btn-ghost btn-sm">更多 ></a>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <c:forEach var="item" items="${section.items}">
                <div class="card bg-base-100 shadow-xl">
                    <figure class="relative pt-[140%]">
                        <img src="${item.imageUrl}" alt="${item.altText}" class="absolute inset-0 w-full h-full object-cover"/>
                        <div class="absolute top-0 right-0 m-2 badge ${item.badgeClass}">${item.badgeText}</div>
                    </figure>
                    <div class="card-body p-2">
                        <h3 class="card-title text-sm">${item.title}</h3>
                        <p class="text-xs text-gray-400">${item.description}</p>
                        <c:if test="${not empty item.rating}">
                            <div class="flex items-center mt-1">
                                <div class="rating rating-sm">
                                    <c:forEach var="i" begin="1" end="5">
                                        <input type="radio" name="rating-${item.id}" class="mask mask-star-2 bg-orange-400" ${i <= item.rating ? 'checked' : ''}/>
                                    </c:forEach>
                                </div>
                                <span class="text-xs text-gray-400 ml-1">${item.rating}</span>
                            </div>
                        </c:if>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</c:forEach>
